<template>
    <draggable :list="items" class="drag-container" :options="dragOptions">
      <div v-for="item in items" :key="item.id" class="drag-item">
        <slot :name="item.name"/>
      </div>
    </draggable>
  </template>
  
<script setup>
import draggable from 'vuedraggable'
import {defineProps, ref} from 'vue'
const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    dragOptions: {
        type: Object,
        default: {}
    }
})
</script>

<style>
.drag-item {
    cursor: move;
}
</style>